<template>
	<gui-page :customHeader="true">
		<template v-slot:gHeader>
			<!-- #ifdef MP -->
			<view style="height:20px;"></view>
			<!-- #endif -->
		</template>
		<!-- 请开始您的开发 ~ -->
		<template v-slot:gBody>
			<view class="gui-padding">
				<!-- 搜索框 -->
				<view v-if="!isLoad" class="demo-bg demo-title header-search  gui-border-radius"></view>
				<view v-if="isLoad" class="header-search gui-bg-white gui-dark-bg-level-3 gui-border-box">
					<gui-search @clear="search" placeholder="搜索课程" @confirm="search"></gui-search>
				</view>
				<view v-if="!isLoad" class="demo-bg  demo-title gui-border-radius mt10"></view>
				<view v-if="isLoad" class="mt10">
					<gui-switch-navigation :items="navItems" textAlign="center" :isCenter="true"
						activeDirection="center" :size="0" :margin="20" padding="10rpx"
						@change="navchange"></gui-switch-navigation>
				</view>
				<cc-search-course :waterfall="false"></cc-search-course>
			</view>
		</template>
	</gui-page>
</template>
<script>
	export default {
		data() {
			return {
				isLoad: false,
				navItems: [{
					id: 1,
					name: '编程开发'
				}, {
					id: 1,
					name: '设计创作'
				}, {
					id: 2,
					name: '数据分析'
				}, {
					id: 2,
					name: '人工智能'
				}, {
					id: 2,
					name: '新媒体'
				}],
				tags: ["AI创造合集", "商业插画入门", "哈哈", "家庭AI", "绘画"]
			}
		},
		methods: {
			handleSearch(e) {
				uni.navigateTo({
					url: `/pages/search/detail?keyword=${e}`,
				});
			},
			navchange() {

			}
		},
		onLoad() {
			setTimeout(() => {
				this.isLoad = true
			}, 1000)
		}
	}
</script>
<style scoped lang="scss">

</style>